<template>
  <xdh-echarts :options="options" width="100%" height="88%"></xdh-echarts>
</template>

<script>
  import XdhEcharts from '../widgets/xdh-echarts'
  import echarts from 'echarts';

  export default {
    name: 'bar-one',
    components: {
      XdhEcharts
    },
    props: {
      // 柱状图数据
      seriesData: {
        type: Array,
        default() {
          return []
        }
      },
      // X轴坐标
      xAxisData: {
        type: Array,
        default() {
          return []
        }
      }
    },
    directives: {},
    mixins: [],
    data() {
      return {}
    },
    computed: {
      options() {
        return {
          grid: {
            top: 20,
            left: '15%'
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                color: '#0F3D72'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#0F3D72'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#fff',
              showMinLabel: true,
              showMaxLabel: true,
              interval: 0,
              align: 'center',
              verticalAlign: 'top',
              formatter: (value, index) => {
                let _value = ''
                if (value) {
                  const vLen = value.length
                  for (let i = 0; i < vLen; i++) {
                    _value += value[i]
                    if ((i + 1) % 4 === 0 && i < vLen - 1) {
                      _value += '\n'
                    }
                  }
                } else {
                  _value = value
                }
                return `{h|${_value}}`
              },
              rich: {
                h: {
                  lineHeight: 13
                }
              }
            },
            data: this.xAxisData
          },
          yAxis: {
            name: '(人)',
            nameLocation: 'start',
            nameTextStyle: {
              color: '#fff'
            },
            nameGap: 9,
            shadowOffsetX: '-20px',
            axisLine: {
              lineStyle: {
                color: '#0F3D72'
              }
            },
            splitLine: {
              lineStyle: {
                color: '#0F3D72'
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#fff'
            }
          },
          series: [{
            type: 'bar',
            barMaxWidth: '50%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  {offset: 0, color: '#3A6CF9'},
                  {offset: 1, color: '#29E26E'}
                ]
              )
            },
            data: this.seriesData
          }]
        }
      }
    },
    watch: {},
    methods: {},
    created() {
    }
  }
</script>

<style scoped>

</style>
